<!DOCTYPE html>
<html ng-app="dashboard">
<head>
    <link rel="stylesheet" type="text/css" href="/css/dashboard.css"/>
    <base href="/">
</head>
<body>
<div id="wrapper">
    <!-- Sidebar -->
    <div id="sidebar-wrapper">
        <ul class="sidebar-nav">
            <li class="sidebar-brand">
                   Astral
            </li>
            <li class="sidebar-header">
                <span class="sidebar-header-text">STARS</span>
            </li>
            <li class="sidebar-header" ng-click="setCurrentTag()">
                <span class="sidebar-header-stars"><i class="glyphicon glyphicon-inbox"></i>&nbsp&nbsp<span style="color: rgba(255,255,255,0.65);">All Stars</span></span>
            </li>
            <li class="sidebar-header" ng-click="filterByUntagged()">
                <span class="sidebar-header-stars"><i class="glyphicon glyphicon-star-empty"></i>&nbsp&nbsp<span style="color: rgba(255,255,255,0.65);">Untagged Stars</span></span>
            </li>
            <li class="sidebar-header">
                <span class="sidebar-header-text">TAGS</span>
            </li>
            <li  ng-repeat="tag in tags" class="tag-item">{{tag.name}} <span style="float: right" class="bubble">2</span> </li>
        </ul>
    </div>

    <div id="page-content-wrapper">

        <nav class="navbar-default nopadding main-nav" >
            <div class="container-fluid">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                            data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                    <span class="navbar-brand" ><strong>All Stars</strong></span>
                </div>
                <!-- Collect the nav links, forms, and other content for toggling -->
                <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
                    <form class="navbar-form navbar-left" role="search">
                        <div class="form-group">
                            <input type="text" class="form-control" placeholder="Search">
                        </div>
                    </form>
                    <ul class="nav navbar-nav navbar-right">
                        <li class="dropdown">

                            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button"
                               aria-haspopup="true" aria-expanded="false">
                                <img ng-src="{{user.avatar_url}}" class="user-avatar"/>
                                <span ng-bind="user.login"></span>
                                <span class="glyphicon glyphicon-chevron-down"></span>
                            </a>
                            <ul class="dropdown-menu" style="z-index: 100">
                                <li><a href="#">Settings</a></li>
                                <li><a href="#">Support & Feedback</a></li>
                                <li><a href="#">Gratipay</a></li>
                                <li><a href="#">Sign Out</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <div class="main">
            <aside class='col-fixed'>
                <ul class=" nopadding">
                    <div class="ng-hide" ng-show="loadingStatus.active" ng-hide="stars[0]">
                        <p ng-bind="loadingStatus.message"></p>
                    </div>
                    <li  class="nopadding repo draggable" ng-show="stars[0]" ng-repeat="star in stars track by star.full_name | filter:starHasCurrentTag | filter:repoSearch | filter:untagged"
                         ng-click="setCurrentStar(star)">
                        <span class="repo-name ng-binding">{{star.full_name}}</span>
                        <div class="repo-description ng-binding">{{star.description}}</div>
                        <ul class="repo-tags ng-hide" ng-show="star.tags">
                            <!-- ngRepeat: tag in star.tags track by tag.id -->
                        </ul>
                        <div class="repo-stats">
                            <span class="repo-stat stars ng-binding"><i class="glyphicon glyphicon-star-empty"></i> {{star.stargazers_count}}</span>
                            <span class="repo-stat forks ng-binding"><i class="glyphicon glyphicon-copy"></i> {{star.forks}}</span>
                            <span class="repo-stat link"><a ng-href="{{star.html_url}}" target="_blank" href="{{star.html_url}}">View on GitHub</a></span>
                        </div>
                    </li>
                </ul>
            </aside>
            <section class='readme'>
                <header class="readme-header">
                    <button class="btn btn-sm">Edit Tag</button>
                    <button class="btn btn-sm">Unstar</button>
                    <div class="repo-address">
                        <label for="txtGitHubCloneURL">Clone:</label>
                        <input type="text" class="input" id="txtGitHubCloneURL" ng-value="currentStar.ssh_url" textselect="" readonly="">
                    </div>
                </header>
                <article class="readme-content">
                    <div class="ng-hide" ng-show="readmeLoading" >
                        <p ng-bind="loadingStatus.message"></p>
                    </div>
                    <div class="repo-readme syntax ng-binding ng-scope" ng-bind-html="readme"></div>
                </article>
            </section>
        </div>
    </div>
</div>

</body>
</html>